<template>
  <div class="box">
    <van-nav-bar left-arrow style="background: blue">
      <template #left>
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <span style="color: #fff">客户列表信息</span>
      </template>
      <template #right>
        <span style="color: #fff" @click="news">新增</span>
      </template>
    </van-nav-bar>

    <div class="search">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="客户名称/联系方式"
        @search="onSearch"
      >
        <template #action>
          <div style="color: blue">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="content" v-for="(item, index) in cuentsArr" :key="index">
      <div class="content_box">
        <div>
          客户名称<span>{{ item.custName }}</span>
        </div>
        <div>
          联系方式<span>{{ item.telephone }}</span>
        </div>
        <div>
          公司名称<span>{{ item.company }}</span>
        </div>
        <div>
          职务<span>{{ item.position }}</span>
        </div>
      </div>
      <van-divider :style="{ borderColor: '#ccc' }" />
      <div class="content_btn">
        <van-button
          type="default"
          color="skyblue"
          round
          @click="handleCustimer(item.custName)"
          >新增拜访</van-button
        >
        <van-button
          type="default"
          color="skyblue"
          round
          style="margin-left: 0.8rem"
          @click="handLncome(item)"
          >拜访记录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getCust } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      cuentsArr: [],
    };
  },
  created() {
    // let formData = new FormData();
    // formData.append("current", 1);
    // formData.append("size", 100);
    // formData.append("keyword", "");
    // getCust(formData);
    getCust({
      current: 1,
      size: 100,
      keyword: "",
    }).then((res) => {
      console.log(res.data);
      this.cuentsArr = res.data.records;
    });
  },
  methods: {
    onSearch() {
      getCust({
        current: 1,
        size: 100,
        keyword: this.value,
      }).then((res) => {
        console.log(res.data);
        this.cuentsArr = res.data.records;
      });
    },
    news() {
      this.$router.push("/newcuents");
    },
    handleCustimer(val) {
      this.$router.push({
        path: "/newcustomer",
        query: { user: val, isGuesnt: true },
      });
    },
    handLncome(val) {
      this.$router.push({ name: "CuentersView", params: { val: val } });
    },
  },
};
</script>

<style scoped>
.search {
  margin-bottom: 0.5rem;
}
.content {
  padding: 0.8rem;
  background: #fff;
  margin-bottom: 0.6rem;
}
.content_box {
  color: #ccc;
}
.content_box span {
  margin-left: 0.5rem;
  color: #000;
}
.content_btn {
  display: flex;
  justify-content: flex-end;
}
</style>
